<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gitee图床</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="top">
      <div style="text-align: right; margin-right: 2em;">
        <a target="_blank" href="https://gitee.com/zheng_yongtao/electron_program">查看源码</a>
        <span style="margin-left: 1em;">作者：<a target="_blank" href="http://jyeontu.xyz/jvuewheel/#/homePage">JYeontu</a></span>
      </div>
    </div>
    <div class="mid">
      <div class="mid-top">
        <h1>Gitee图床</h1>
        <div class="tab-container">
          <!-- 标签 -->
          <div class="tab active-tab" onclick="changeTab(0)">上传图片</div>
          <div class="tab" onclick="changeTab(1)">查看图片</div>
          <div class="tab" onclick="changeTab(2)">配置</div>
          <div class="tab" onclick="changeTab(3)">翻译</div>
        </div>
      </div>
      <div class="mid-bottom">
        <div id="uploadTab1" class="tab-content active-content">
          <h2>上传图片</h2>
          <div id="dropzone">
            <div class="dropzone-tip">将图片拖拽到此处或点击选择文件</div>
          </div>
          <button class="upload-btn" id="upload-btn">上传到当前图片</button>
          <input
            type="file"
            style="display: none"
            id="folderInput"
            onchange="uploadImages()"
            webkitdirectory
            multiple
          />
          <button class="upload-btn" onclick="selectFolder()" style="background: #FFD04C;">
            选择文件夹上传
          </button>
          <div id="previewContent">
            <h4>图片链接</h4>
            <div class="preview-item">
              <textarea id="previewUrl" class="preview-item-url textarea"></textarea>
              <button class="preview-item-btn" onclick="urlCopy('previewUrl')">复制</button>
            </div>
            <h4>Markdown格式</h4>
            <div class="preview-item">
              <textarea id="previewForMarkdown" class="preview-item-url textarea"></textarea>
              <button class="preview-item-btn" onclick="urlCopy('previewForMarkdown')">复制</button>
          </div>
        </div>
        </div>
        <div id="uploadTab2" class="tab-content">
          <h2 onclick="getImg()" style="cursor: pointer">刷新</h2>
          <div class="waterfall-container" id="waterfall-container"></div>
          <div id="JMouseMenu" class="j-mouse-menu">
            <div class="context-menu-item" onclick="menuClick('删除')">删除图片</div>
            <div class="context-menu-item" onclick="menuClick('复制图片链接')">复制图片链接</div>
            <div class="context-menu-item" onclick="menuClick('复制为Markdown链接')">复制为Markdown链接</div>
          </div>
        </div>
        <div id="uploadTab3" class="tab-content">
          <h2>配置</h2>
          <form id="configForm">
            <label for="accessToken">用户授权码：</label>
            <input
              class="config-input"
              type="password"
              id="accessToken"
              name="accessToken"
              required
            />

            <label for="username">仓库所属空间地址：</label>
            <input
              class="config-input"
              type="text"
              id="username"
              name="username"
              required
            />

            <label for="repo">仓库路径：</label>
            <input
              class="config-input"
              type="text"
              id="repo"
              name="repo"
              required
            />

            <label for="dirPath">目录名：</label>
            <input
              class="config-input"
              type="text"
              id="dirPath"
              name="dirPath"
              required
            />

            <label for="branchName">分支名：</label>
            <input
              class="config-input"
              type="text"
              id="branchName"
              name="branchName"
              required
            />

            <input type="submit" value="保存" />
          </form>
        </div>
        <div id="uploadTab4" class="tab-content">
          <iframe title="翻译" style="width:100%;height:75vh" src="https://fanyi.qq.com/"></iframe>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="script/Toast.js"></script>
    <script type="text/javascript" src="script/waterFall.js"></script>
    <script type="text/javascript" src="script/gitOperate.js"></script>
    <script type="text/javascript" src="script/mouseMenu.js"></script>
    <script type="text/javascript" src="script/getImg.js"></script>
    <script type="text/javascript" src="script/init.js"></script>
    <script type="text/javascript" src="script/uploadImg.js"></script>
    <script type="text/javascript" src="script/tab.js"></script>
    <script>
      document
        .getElementById("configForm")
        .addEventListener("submit", function (event) {
          event.preventDefault(); // 阻止表单提交
          // 获取表单输入值
          const gitConfig = {
            accessToken: document.getElementById("accessToken").value,
            username: document.getElementById("username").value,
            repo: document.getElementById("repo").value,
            branchName: document.getElementById("branchName").value,
            dirPath: document.getElementById("dirPath").value,
          };

          localStorage.setItem("gitConfig", JSON.stringify(gitConfig));
          gitOperate = new GitOperate(gitConfig);
          Toast.showToast("配置已保存"); // 显示保存成功提示
          waterfall.init();
        });
    </script>
  </body>
</html>
